<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>积分记录 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f7fa;
      color: #333;
      min-height: 100vh;
      margin: 0;
    }
    
    /* 顶部导航 */
    .top-nav {
      height: 50px;
      background-color: #fff;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
      padding: 0 15px;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0 auto;
    }
    
    .nav-btn {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
      text-decoration: none;
    }
    
    /* 积分概览 */
    .points-overview {
      background-color: #fff;
      padding: 15px;
      margin-bottom: 10px;
    }
    
    .overview-title {
      font-size: 14px;
      color: #666;
      margin-bottom: 5px;
    }
    
    .overview-amount {
      font-size: 24px;
      font-weight: 700;
      color: #333;
      margin-bottom: 8px;
    }
    
    .overview-stats {
      display: flex;
      justify-content: space-between;
    }
    
    .stat-item {
      text-align: center;
      flex: 1;
    }
    
    .stat-value {
      font-size: 16px;
      font-weight: 600;
    }
    
    .stat-label {
      font-size: 12px;
      color: #999;
    }
    
    /* 样式切换器 */
    .style-switcher {
      background-color: #fff;
      padding: 12px 15px;
      border-bottom: 1px solid #eee;
    }
    
    .style-tabs {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 5px;
    }
    
    .style-tabs::-webkit-scrollbar {
      display: none;
    }
    
    .style-tab {
      padding: 6px 14px;
      background-color: #f5f7fa;
      border-radius: 20px;
      font-size: 14px;
      white-space: nowrap;
      cursor: pointer;
    }
    
    .style-tab.active {
      background-color: #3b82f6;
      color: white;
    }
    
    /* 通用记录页面样式 */
    .record-page {
      display: none;
    }
    
    .record-page.active {
      display: block;
    }
    
    /* 筛选栏 */
    .filter-bar {
      display: flex;
      padding: 10px 15px;
      background-color: white;
      border-bottom: 1px solid #eee;
      gap: 10px;
    }
    
    .filter-item {
      flex: 1;
      padding: 6px 0;
      text-align: center;
      font-size: 14px;
      position: relative;
    }
    
    .filter-item::after {
      content: "\f078";
      font-family: "FontAwesome";
      font-size: 12px;
      margin-left: 5px;
      color: #999;
    }
    
    /* 样式1 - 简洁列表 */
    .simple-list {
      padding: 0;
      margin: 0;
      list-style: none;
    }
    
    .simple-item {
      background-color: white;
      padding: 15px;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .simple-info {
      flex: 1;
    }
    
    .simple-title {
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 3px;
    }
    
    .simple-time {
      font-size: 12px;
      color: #999;
    }
    
    .simple-amount {
      font-weight: 600;
      font-size: 16px;
    }
    
    .amount-in {
      color: #10b981;
    }
    
    .amount-out {
      color: #ef4444;
    }
    
    /* 样式2 - 详情列表 */
    .detail-list {
      padding: 0;
      margin: 0;
      list-style: none;
    }
    
    .detail-item {
      background-color: white;
      margin: 0 15px 10px 15px;
      border-radius: 12px;
      padding: 15px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    }
    
    .detail-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    
    .detail-title {
      font-size: 16px;
      font-weight: 500;
    }
    
    .detail-content {
      font-size: 13px;
      color: #666;
      margin-bottom: 10px;
      padding-left: 22px;
      position: relative;
    }
    
    .detail-content::before {
      content: "";
      position: absolute;
      left: 0;
      top: 6px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: #ddd;
    }
    
    .detail-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      color: #999;
    }
    
    /* 样式3 - 分类视图 */
    .category-section {
      margin-bottom: 20px;
    }
    
    .category-header {
      padding: 10px 15px;
      font-size: 14px;
      color: #666;
      background-color: #f5f7fa;
    }
    
    .category-items {
      background-color: white;
    }
    
    .category-record {
      padding: 12px 15px;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .record-icon {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
    }
    
    .icon-in {
      background-color: #ecfdf5;
      color: #10b981;
    }
    
    .icon-out {
      background-color: #fee2e2;
      color: #ef4444;
    }
    
    .record-info {
      flex: 1;
    }
    
    .record-name {
      font-size: 15px;
      margin-bottom: 2px;
    }
    
    .record-time {
      font-size: 12px;
      color: #999;
    }
    
    /* 样式4 - 统计视图 */
    .stats-card {
      background-color: white;
      border-radius: 12px;
      padding: 15px;
      margin: 0 15px 15px 15px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    .stats-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 15px;
    }
    
    .monthly-stats {
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
    }
    
    .stats-value {
      text-align: center;
    }
    
    .value-number {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 5px;
    }
    
    .value-label {
      font-size: 12px;
      color: #666;
    }
    
    .chart-container {
      height: 180px;
      margin-bottom: 15px;
      position: relative;
      overflow: hidden;
    }
    
    .chart-bars {
      display: flex;
      align-items: flex-end;
      height: 100%;
      padding-bottom: 20px;
      gap: 8px;
    }
    
    .chart-bar {
      flex: 1;
      background-color: #dbeafe;
      border-radius: 4px 4px 0 0;
      position: relative;
    }
    
    .chart-bar.highlight {
      background-color: #3b82f6;
    }
    
    .chart-label {
      position: absolute;
      bottom: -20px;
      left: 0;
      right: 0;
      text-align: center;
      font-size: 11px;
      color: #999;
    }
    
    .recent-records {
      padding: 0 15px;
    }
    
    /* 空状态 */
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 20px;
      text-align: center;
    }
    
    .empty-icon {
      font-size: 60px;
      margin-bottom: 20px;
      color: #cbd5e1;
    }
    
    .empty-text {
      font-size: 16px;
      margin: 0 0 10px 0;
    }
    
    .empty-subtext {
      font-size: 14px;
      color: #94a3b8;
      margin: 0;
    }
    
    /* 提示框 */
    .toast {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(0,0,0,0.8);
      color: white;
      border-radius: 8px;
      padding: 10px 15px;
      font-size: 14px;
      z-index: 1000;
      display: none;
    }
  </style>
</head>
<body>
  <!-- 提示框 -->
  <div class="toast" id="toast"></div>
  
  <!-- 顶部导航 -->
  <nav class="top-nav">
    <a href="#" class="nav-btn" id="backBtn">
      <i class="fa fa-angle-left"></i>
    </a>
    <h1 class="nav-title">积分记录</h1>
    <a href="#" class="nav-btn" id="filterBtn">
      <i class="fa fa-filter"></i>
    </a>
  </nav>
  
  <!-- 积分概览 -->
  <div class="points-overview">
    <div class="overview-title">当前可用积分</div>
    <div class="overview-amount">12,580</div>
    <div class="overview-stats">
      <div class="stat-item">
        <div class="stat-value">+3,250</div>
        <div class="stat-label">本月收入</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">-1,820</div>
        <div class="stat-label">本月支出</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">15</div>
        <div class="stat-label">本月记录</div>
      </div>
    </div>
  </div>
  
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="style-tabs">
      <div class="style-tab active" data-style="simple">简洁列表</div>
      <div class="style-tab" data-style="detail">详情列表</div>
      <div class="style-tab" data-style="category">分类视图</div>
      <div class="style-tab" data-style="stats">统计视图</div>
    </div>
  </div>
  
  <!-- 筛选栏 -->
  <div class="filter-bar">
    <div class="filter-item">全部类型</div>
    <div class="filter-item">本月</div>
    <div class="filter-item">全部状态</div>
  </div>
  
  <!-- 简洁列表样式 -->
  <div class="record-page active" id="simple">
    <ul class="simple-list">
      <li class="simple-item">
        <div class="simple-info">
          <div class="simple-title">每日签到</div>
          <div class="simple-time">今天 08:30</div>
        </div>
        <div class="simple-amount amount-in">+50</div>
      </li>
      
      <li class="simple-item">
        <div class="simple-info">
          <div class="simple-title">兑换月度会员</div>
          <div class="simple-time">昨天 15:45</div>
        </div>
        <div class="simple-amount amount-out">-2000</div>
      </li>
      
      <li class="simple-item">
        <div class="simple-info">
          <div class="simple-title">发布优质内容奖励</div>
          <div class="simple-time">06-12 10:20</div>
        </div>
        <div class="simple-amount amount-in">+300</div>
      </li>
      
      <li class="simple-item">
        <div class="simple-info">
          <div class="simple-title">充值5000积分</div>
          <div class="simple-time">06-10 20:15</div>
        </div>
        <div class="simple-amount amount-in">+5000</div>
      </li>
      
      <li class="simple-item">
        <div class="simple-info">
          <div class="simple-title">赠送虚拟礼物</div>
          <div class="simple-time">06-08 21:30</div>
        </div>
        <div class="simple-amount amount-out">-500</div>
      </li>
      
      <li class="simple-item">
        <div class="simple-info">
          <div class="simple-title">邀请好友注册</div>
          <div class="simple-time">06-05 14:22</div>
        </div>
        <div class="simple-amount amount-in">+1000</div>
      </li>
    </ul>
  </div>
  
  <!-- 详情列表样式 -->
  <div class="record-page" id="detail">
    <ul class="detail-list">
      <li class="detail-item">
        <div class="detail-header">
          <div class="detail-title">每日签到</div>
          <div class="simple-amount amount-in">+50</div>
        </div>
        <div class="detail-content">连续签到第7天，额外奖励10积分</div>
        <div class="detail-footer">
          <div>今天 08:30</div>
          <div>状态：已完成</div>
        </div>
      </li>
      
      <li class="detail-item">
        <div class="detail-header">
          <div class="detail-title">兑换月度会员</div>
          <div class="simple-amount amount-out">-2000</div>
        </div>
        <div class="detail-content">会员权益已激活，有效期至2023-07-15</div>
        <div class="detail-footer">
          <div>昨天 15:45</div>
          <div>状态：已兑换</div>
        </div>
      </li>
      
      <li class="detail-item">
        <div class="detail-header">
          <div class="detail-title">发布优质内容奖励</div>
          <div class="simple-amount amount-in">+300</div>
        </div>
        <div class="detail-content">内容《前端开发最佳实践》被选为精选内容</div>
        <div class="detail-footer">
          <div>06-12 10:20</div>
          <div>状态：已到账</div>
        </div>
      </li>
      
      <li class="detail-item">
        <div class="detail-header">
          <div class="detail-title">充值5000积分</div>
          <div class="simple-amount amount-in">+5000</div>
        </div>
        <div class="detail-content">订单号：P2023061020150089，支付方式：微信支付</div>
        <div class="detail-footer">
          <div>06-10 20:15</div>
          <div>状态：已完成</div>
        </div>
      </li>
    </ul>
  </div>
  
  <!-- 分类视图样式 -->
  <div class="record-page" id="category">
    <!-- 收入分类 -->
    <div class="category-section">
      <div class="category-header">积分收入</div>
      <div class="category-items">
        <div class="category-record">
          <div class="record-icon icon-in">
            <i class="fa fa-sign-in"></i>
          </div>
          <div class="record-info">
            <div class="record-name">每日签到</div>
            <div class="record-time">今天 08:30</div>
          </div>
          <div class="simple-amount amount-in">+50</div>
        </div>
        
        <div class="category-record">
          <div class="record-icon icon-in">
            <i class="fa fa-trophy"></i>
          </div>
          <div class="record-info">
            <div class="record-name">优质内容奖励</div>
            <div class="record-time">06-12 10:20</div>
          </div>
          <div class="simple-amount amount-in">+300</div>
        </div>
        
        <div class="category-record">
          <div class="record-icon icon-in">
            <i class="fa fa-credit-card"></i>
          </div>
          <div class="record-info">
            <div class="record-name">充值5000积分</div>
            <div class="record-time">06-10 20:15</div>
          </div>
          <div class="simple-amount amount-in">+5000</div>
        </div>
        
        <div class="category-record">
          <div class="record-icon icon-in">
            <i class="fa fa-user-plus"></i>
          </div>
          <div class="record-info">
            <div class="record-name">邀请好友注册</div>
            <div class="record-time">06-05 14:22</div>
          </div>
          <div class="simple-amount amount-in">+1000</div>
        </div>
      </div>
    </div>
    
    <!-- 支出分类 -->
    <div class="category-section">
      <div class="category-header">积分支出</div>
      <div class="category-items">
        <div class="category-record">
          <div class="record-icon icon-out">
            <i class="fa fa-diamond"></i>
          </div>
          <div class="record-info">
            <div class="record-name">兑换月度会员</div>
            <div class="record-time">昨天 15:45</div>
          </div>
          <div class="simple-amount amount-out">-2000</div>
        </div>
        
        <div class="category-record">
          <div class="record-icon icon-out">
            <i class="fa fa-gift"></i>
          </div>
          <div class="record-info">
            <div class="record-name">赠送虚拟礼物</div>
            <div class="record-time">06-08 21:30</div>
          </div>
          <div class="simple-amount amount-out">-500</div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 统计视图样式 -->
  <div class="record-page" id="stats">
    <div class="stats-card">
      <div class="stats-title">积分趋势（近6个月）</div>
      <div class="monthly-stats">
        <div class="stats-value">
          <div class="value-number" style="color:#10b981">+8,520</div>
          <div class="value-label">总收入</div>
        </div>
        <div class="stats-value">
          <div class="value-number" style="color:#ef4444">-4,350</div>
          <div class="value-label">总支出</div>
        </div>
        <div class="stats-value">
          <div class="value-number" style="color:#3b82f6">+4,170</div>
          <div class="value-label">净增长</div>
        </div>
      </div>
      
      <div class="chart-container">
        <div class="chart-bars">
          <div class="chart-bar" style="height:40%">
            <div class="chart-label">1月</div>
          </div>
          <div class="chart-bar" style="height:55%">
            <div class="chart-label">2月</div>
          </div>
          <div class="chart-bar" style="height:30%">
            <div class="chart-label">3月</div>
          </div>
          <div class="chart-bar" style="height:65%">
            <div class="chart-label">4月</div>
          </div>
          <div class="chart-bar" style="height:45%">
            <div class="chart-label">5月</div>
          </div>
          <div class="chart-bar highlight" style="height:80%">
            <div class="chart-label">6月</div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="stats-card">
      <div class="stats-title">积分来源分析</div>
      <div class="category-items" style="border-radius: 8px; overflow: hidden;">
        <div class="category-record">
          <div class="record-icon icon-in">
            <i class="fa fa-credit-card"></i>
          </div>
          <div class="record-info">
            <div class="record-name">充值</div>
            <div class="record-time">占比 65%</div>
          </div>
          <div class="simple-amount amount-in">+5,500</div>
        </div>
        
        <div class="category-record">
          <div class="record-icon icon-in">
            <i class="fa fa-trophy"></i>
          </div>
          <div class="record-info">
            <div class="record-name">内容奖励</div>
            <div class="record-time">占比 20%</div>
          </div>
          <div class="simple-amount amount-in">+1,700</div>
        </div>
        
        <div class="category-record">
          <div class="record-icon icon-in">
            <i class="fa fa-user-plus"></i>
          </div>
          <div class="record-info">
            <div class="record-name">邀请奖励</div>
            <div class="record-time">占比 10%</div>
          </div>
          <div class="simple-amount amount-in">+850</div>
        </div>
        
        <div class="category-record">
          <div class="record-icon icon-in">
            <i class="fa fa-sign-in"></i>
          </div>
          <div class="record-info">
            <div class="record-name">签到</div>
            <div class="record-time">占比 5%</div>
          </div>
          <div class="simple-amount amount-in">+470</div>
        </div>
      </div>
    </div>
    
    <div class="recent-records">
      <div class="stats-title">最近记录</div>
      <ul class="simple-list">
        <li class="simple-item">
          <div class="simple-info">
            <div class="simple-title">每日签到</div>
            <div class="simple-time">今天 08:30</div>
          </div>
          <div class="simple-amount amount-in">+50</div>
        </li>
        
        <li class="simple-item">
          <div class="simple-info">
            <div class="simple-title">兑换月度会员</div>
            <div class="simple-time">昨天 15:45</div>
          </div>
          <div class="simple-amount amount-out">-2000</div>
        </li>
      </ul>
    </div>
  </div>
  
  <!-- 空状态示例 (默认隐藏) -->
  <div class="empty-state" style="display: none;">
    <div class="empty-icon">
      <i class="fa fa-file-text-o"></i>
    </div>
    <h3 class="empty-text">暂无积分记录</h3>
    <p class="empty-subtext">您当前没有任何积分相关记录</p>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 获取元素
    const styleTabs = document.querySelectorAll('.style-tab');
    const recordPages = document.querySelectorAll('.record-page');
    const filterItems = document.querySelectorAll('.filter-item');
    const backBtn = document.getElementById('backBtn');
    const filterBtn = document.getElementById('filterBtn');
    const toast = document.getElementById('toast');
    
    // 样式切换
    styleTabs.forEach(tab => {
      tab.addEventListener('click', function() {
        // 移除所有激活状态
        styleTabs.forEach(t => t.classList.remove('active'));
        recordPages.forEach(page => page.classList.remove('active'));
        
        // 设置当前激活状态
        this.classList.add('active');
        const style = this.getAttribute('data-style');
        document.getElementById(style).classList.add('active');
        
        showToast(`已切换到${this.textContent}`);
      });
    });
    
    // 筛选项点击事件
    filterItems.forEach(item => {
      item.addEventListener('click', function() {
        showToast(`筛选：${this.textContent}`);
        // 实际应用中可打开筛选弹窗
      });
    });
    
    // 返回按钮点击事件
    backBtn.addEventListener('click', function() {
      showToast('返回上一页');
      // 实际应用中可以使用history.back()
    });
    
    // 筛选按钮点击事件
    filterBtn.addEventListener('click', function() {
      showToast('高级筛选');
    });
    
    // 显示提示
    function showToast(message) {
      toast.textContent = message;
      toast.style.display = 'block';
      
      setTimeout(() => {
        toast.style.display = 'none';
      }, 2000);
    }
  </script>
</body>
</html>
